*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    height: 500px;
    /* font-size: 0;结合下面的font-size解决div的换行bug */
}
/* body>div{
    height: 100%;
    display: inline-block;如果这样写，就要注意div的换行bug */
    /* font-size: 14px;/*结合body里的font-size解决div的换行bug*/
/* } */ 
#left,#right{
    width: 200px;
    height: 100%;
    background: pink;
}
#left{
    position: absolute;
    left: 0;
    top: 0;
}
#right{
    position: absolute;
    right: 0;
    top: 0;

}
#middle{
    /* width: calc(100%-200px);  使用计算属性实现三列布局*/
    /* width: ;左右两个容器绝对定位 */
    margin: 0px 200px;
}